<template>
  <div class="icons">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(page,index) of pages" :key="index">
        <div class="icon" v-for="item of pages[index]" :key="item.id">
          <img class="icon-img" :src="item.imgUrl" alt="">
          <p>{{item.desc}}</p>
        </div>
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
    export default {
        name: "HomeIcons",
        data () {
          return {
            swiperOption:{
              pagination:'.swiper-pagination',
              autoplay: false
            }
          }
        },
        props:{
          iconList:Array
        },
        computed:{
          pages(){
            const pages = []
            this.iconList.forEach((item,index)=>{
              const page = Math.floor(index/8)
              if (!pages[page]){
                pages[page] = []
              }
              pages[page].push(item)
            })
            return pages
          }
        }
    }
</script>

<style lang="stylus" scoped>
  @import "~style/mixins.styl"
  .icons >>> .swiper-pagination-bullet
    width: 5px
    height: 5px
  .icons >>> .swiper-pagination-bullet-active
    background: #00bcd4
  .icons >>> .swiper-container
    height 0
    padding-bottom: 50%
  .icons
    width: 100%
    height 3.7rem
    overflow: hidden
    padding-top:.1rem
    .icon
      width 25%
      float: left
      height 1.5rem
      text-align center
      padding-top:.1rem
      .icon-img
        height 1.1rem
        width 1.1rem
        margin-bottom:.1rem
      p
        color #333
        ellipsis()
</style>
